<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <title>安装通-线下支付</title>
    <link href="/res/css/common/baseAzt.css" rel="stylesheet" type="text/css" />
    <link href="/res/css/common/backcommon.css" rel="stylesheet" type="text/css"/>
    <link href="/res/css/respective/order/back-order.css" rel="stylesheet">
    <link rel="stylesheet" href="/res/third/webupload/css/webuploader.css" type="text/css"/>
    <style type="text/css">
        .azb{
            height: 100px;
            background-color: #f7f7f7;
            padding: 0 20px;
            margin: 20px 0;
        }
        .azb dfn{
            color: #f6a422;
        }
        .azb p{
            text-align: right;
        }
        .azb p dfn{
            font-size: 20px;
        }
        button.pay{
            font-size: 16px;
            width: 100px;
            height: 30px;
            color: white;
            float: right;
        }
        button.pay:hover{
            background-color: #00ceff;
            border:1px solid #00ceff;
        }
        .tip{
            margin-top: 5px;
        }
        .tip h6>img{
            vertical-align: middle;
            cursor: pointer;
        }
        .tip h6>span{
            vertical-align: middle;
        }
        .tip h5{
            margin-bottom: 10px;
        }
        .tip h6{
            margin-bottom: 10px;
            color: #999999;
        }
        .tip h6 a{
            color: #00b1db;
            cursor: pointer;
            vertical-align: middle;
        }
        .tip h6 a:hover{
            color: #00ceff;
        }
        .webuploader-pick{
        	background-color: #f8f8f8;
        }
        .webuploader-pick-hover{
        	background-color: #f7f7f7;
        }
    </style>
</head>
<body style="background-color: #f2f2f2;">
[#include "/front/common/front_head.html"]
<div class="paypage">

    [#include "payHead.html"]

    <h5>支付方式</h5>
    <div class="cardbox">
        <ul class="fix fee">
            <li style="margin-right: 25px;" onclick="gotoOnline();">
                <a>在线支付</a>
                <img src="/res/images/safeBank/ask_03.jpg" alt="">
                <div>
                    <img src="/res/images/arrow/icon_11.png">
                    <p>线上支付流程说明：</p>
                    <p>1、您在安装通平台线上支付</p>
                    <p>2、您登陆平安易宝复核支付</p>
                    <p>3、您完成线上支付</p>
                </div>
                <i></i>
            </li>
            <li style="border-color: #00ceff;">
                <a>线下支付</a>
                <!--<img src="/res/images/safeBank/ask_03.jpg" alt="">-->
                <!--<div>-->
                    <!--<img src="/res/images/arrow/icon_11.png">-->
                    <!--您已支付，未复核或安装通平台审核中的货款。-->
                <!--</div>-->
                <i style="display: inline-block;"></i>
            </li>
        </ul>
    </div>

    <div class="tip">
        <h5 style="border: none;">付款信息</h5>
        <h6><img style="margin-right: 5px;" src="/res/images/safeBank/tip_03.jpg" alt="">如您已通过线下完成付款，请上传支付凭证和合同扫描件，以便卖家及时确认款项到账情况。</h6>
        <label>应付总额： <strong class="org" style="font-size: 16px;">￥${payInfo.totalPrice!?string('0.00')}</strong></label>
        <div>
            <span class="org">*</span>
            <label>本次支付金额：</label>
            <input type="text" placeholder="请输入本次支付金额" id="totalPrice"/>元
        </div>
        <div>
        	<label class="w110">
        		<span class="org" style="vertical-align: top;">*</span>
            	<label style="vertical-align: top;">上传支付凭证：</label>
        	</label> 
            <div class="xuKuang">
                <input type="hidden" id="proveImg"/>
                <div style="width: 100px; height: 100px; background-color: #F8F8F8; text-align: center;" id="pzfile">
                    <p style="font-size: 60px; color: #989898;height: 60px;position: relative;top: -10px;">+</p>
                    <p style="font-size: 14px; color: #666666; font-weight: bold;">上传图片</p>
                </div>
                <div id="proveImgShow"></div>
            </div>
            <div class="upIntro">
                <h3>上传支付凭证[#if integralRulePz??]，可获得${integralRulePz.score!}积分[/#if]</h3>
                <h4>支持JPG、PNG、GIF、BMP格式的图片文件，图片大小不超过5M</h4>
            </div>
        </div>

        <div>
            <label class="w110" >上传交易合同：</label>
            <div class="xuKuang">
                <input type="hidden" id="contractFile"/>
                <div style="width: 100px; height: 100px; background-color: #F8F8F8; text-align: center;" id="htfile">
                    <p style="font-size: 60px; color: #989898;height: 60px;position: relative;
    top: -10px;">+</p>
                    <p style="font-size: 14px; color: #666666; font-weight: bold;">上传文件</p>
                </div>
                <div id="contractFileShow"></div>
            </div>
            <div class="upIntro">
                <h3>上传交易合同[#if integralRuleHt??]，可获得${integralRuleHt.score!}积分[/#if]</h3>
                <h4>文件大小不超过5M</h4>
            </div>
        </div>
        <div style="overflow: hidden;">
            <button type="button" class="feeConfir" style="float: left;margin-left: 113px;" onclick="pay();">提交</button>
        </div>
    </div>
</div>

<!-- 底部菜单-->
[#include "/front/common/front_foot.html"]
</body>
<script src="/res/js/common/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/res/third/layer/layer.js"></script>
<script type="text/javascript" src="/res/third/webupload/js/webuploader.js"></script>
<script>
    $(function(){
        $(".fix.fee li>img").hover(function(){
            $(this).siblings("div").show();
        },function(){
            $(this).siblings("div").hide();
        });

//        $(".fix.fee li>div").each(function(){
//            $(".fix.fee li>div").mouseleave(function(){
//                $(".fix.fee li>div").hide();
//            });
//        });

//        $(".fix.fee li").click(function(){
//            $(this).css("border-color","#00ceff");
//            $(this).siblings("li").css("border-color","#ebebeb");
//            $(this).siblings("li").find("i").hide();
//            $(this).find("i").show();
//        })

        var uploaderPz = WebUploader.create({
            auto : true,    //选择文件后自动上传
            fileSingleSizeLimit : 5*1024*1024,//上传大小控制
            swf: '/res/third/webupload/swf/Uploader.swf',   // swf文件路径
            server: '/res/third/ueditor/jsp/controller.jsp?action=uploadfile',  // 文件接收服务端。
            pick : {
                id : '#pzfile',
                multiple : false    //不支持多文件上传
            },
            resize: false,   // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            accept: {       //只允许图片
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png' //不使用image/*，解决在chrome中的卡顿问题
            }
        });
        uploaderPz.on('uploadSuccess', function(file, response) {
            if(response && response.state == 'SUCCESS') {
                layer.msg('上传成功');
                $("#proveImgShow").siblings("div").hide();
                var img = $('#proveImg').val();
                if(img == '') {
                    $('#proveImg').val(response.url);
                } else {
                    $('#proveImg').val(img + ',' + response.url);
                }
                $('#proveImgShow').append("<img src='" + response.url + "' width='90px' height='80px'/><a href='javascript:void(0)' onclick='deleteMe(this)'>删除</a>");
                $('#proveImg').parent().find('.shangchuan').hide();
                layer.photos({
                    photos : '#proveImgShow'
                });
                uploaderPz.removeFile(file);
            } else {
                layer.msg('上传失败');
            }
        });
        uploaderPz.on('uploadStart', function(file) {
            layer.load(2, {shade: 0.1});
        });
        uploaderPz.on('uploadComplete', function(file) {
            layer.closeAll('loading');
        });
        uploaderPz.on('error', function(type) {
            console.log(type);
            if(type == 'Q_TYPE_DENIED') {
                layer.alert('支付凭证只能是图片');
            }
            if(type == 'F_EXCEED_SIZE') {
                layer.alert('图片不能超过5M');
            }
        });

    });

    var uploaderHt = WebUploader.create({
        auto : true,    //选择文件后自动上传
        fileSingleSizeLimit : 5*1024*1024,
        swf: '/res/third/webupload/swf/Uploader.swf',   // swf文件路径
        server: '/res/third/ueditor/jsp/controller.jsp?action=uploadfile',  // 文件接收服务端。
        pick : {
            id : '#htfile',
            multiple : false    //不支持多文件上传
        },
        resize: false   // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    });
    uploaderHt.on('uploadSuccess', function(file, response) {
        if(response && response.state == 'SUCCESS') {
            layer.msg('上传成功'); 
            $("#contractFileShow").siblings("div").hide();
            var img = $('#contractFile').val();
            if(img == '') {
                $('#contractFile').val(response.url);
            } else {
                $('#contractFile').val(img + ',' + response.url);
            }
            $('#contractFileShow').append("<a href='" + response.url + "' style='color: #00a8e6; line-height: 32px;'>" + file.name + "</a>&nbsp;&nbsp;&nbsp;<a href='javascript:void(0)' onclick='deleteMe(this)'>删除</a>");
            $('#contractFileShow').parent().find('.shangchuan').hide();
            layer.photos({
                photos : '#contractFileShow'
            });
            uploaderHt.removeFile(file);
        } else {
            layer.msg('上传失败');
        }
    });
    uploaderHt.on('uploadStart', function(file) {
        layer.load(2, {shade: 0.1});
    });
    uploaderHt.on('uploadComplete', function(file) {
        layer.closeAll('loading');
    });
    uploaderHt.on('error', function(type) {
        if(type == 'F_EXCEED_SIZE') {
            layer.alert('文件不能超过5M');
        }
    });

    function deleteMe(obj) {
    	$(obj).parent().siblings("div").show(); 
        $(obj).parent().parent().find('input[type=hidden]').val('');
        $(obj).parent().parent().find('.shangchuan').show();
        $(obj).parent().html(''); 
    }

    //支付
    function pay() {
        var maxPayPrice = '${payInfo.totalPrice!}';   //应付的最大金额

        var orderId = '${order.id!}';
        var payId = '${payInfo.id!}';
//        var buyerCompanyBankId = $('div[data-buyerCompanyBankId]').attr('data-buyerCompanyBankId');
//        var sellerCompanyBankId = $('div[data-sellerCompanyBankId]').attr('data-sellerCompanyBankId');
        var payMode = 0;
        var payType = '';
        var totalPrice = $('#totalPrice').val();
        var decoins = 0;
        var proveImg = $('#proveImg').val();
        var contractFile = $('#contractFile').val();
        //var hasRead = $('#hasRead').is(":checked");
        var hasRead = true;

        if(!Number(totalPrice)) {
            layer.alert("请输入正确的支付金额");
            return;
        }
        if(Number(totalPrice) > maxPayPrice) {
            layer.alert("本次支付金额不能超过" + maxPayPrice);
            return;
        }
        if(proveImg == '') {
            layer.alert("请上传支付凭证");
            return;
        }

        $.ajax({
            url : '/order/pay',
            type : 'post',
            dataType : 'json',
            data : {orderId : orderId, payId : payId , payMode : payMode, payType : payType, totalPrice : totalPrice, decoins : decoins, proveImg : proveImg, contractFile : contractFile, hasRead : hasRead},
            beforeSend : function() {
                layer.load(2, {shade: 0.1});
            },
            success : function(data) {
                if(data.success) {
                    layer.alert('提交成功', {closeBtn: 0}, function() {
                        [#if order.ordertype == 2]
                            location.replace('/order/payList?payResult=1');
                        [#else]
                            location.replace('/order/pay/product?tab=2');
                        [/#if]
                    });
                } else {
                    layer.alert(data.msg);
                }
            },
            complete : function() {
                layer.closeAll('loading');
            }
        })
    }

    function gotoOnline() {
        var index = layer.load(2, {shade:0.4});
        if(index) {
            location.href = '/order/pay_on/${order.id!}/${payInfo.id!}';
        }
    }

</script>
</html>
